<template>
  <!-- 布局
    全选
    判断的依据：看下总数和选中的总数是否相等，如果相等，肯定是选中，如果不等
    肯定有一些未选中
    实现全选/反选
    点击之后，调用仓库中的方法，把所有商品的状态，改为传递过去的状态（对当前全选的状态取反）


    合计（选中状态下的合计）&& 结算（选中状态下的数量）
    1、在仓库中写好对应的getters方法
    2、把他们映射到当前组件中使用
   -->
  <view class="my-settle-container">
    <view class="radio">
      <radio :checked="isAllSelect" color="#c00000" @click="selectAll" />全选
    </view>
    <view
      >合计:<text class="amount">{{ getSelectAmount }}</text></view
    >
    <view
      class="btn-settle"
      :style="{ backgroundColor: getSelectTotal === 0 ? '#bdbdbd' : '#c00000' }"
      @click="settle"
      >结算({{ getSelectTotal }})</view
    >
  </view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
  data () {
    return {
      count: 3
    }
  },
  computed: {
    ...mapGetters('cart', [
      'getTotal',
      'getSelectTotal',
      'getSelectAmount',
      'getCartList'
    ]),
    ...mapGetters('user', ['addstr', 'getToken']),
    isAllSelect () {
      return this.getTotal === this.getSelectTotal
    }
  },
  methods: {
    ...mapMutations('cart', ['updateAllGoodState']),
    ...mapMutations('user', ['setRedirectInfo']),
    // 全选 & 反选
    selectAll () {
      this.updateAllGoodState(!this.isAllSelect)
    },
    // 结算
    settle () {
      // 判断是否选择了商品
      if (this.getSelectTotal === 0) {
        uni.showToast({
          title: '请至少选择一件商品进行结算!',
          icon: 'none'
        })
        return
      }
      // 判断是否选择了收货地址
      if (!this.addstr) {
        uni.showToast({
          title: '请选择收货地址!',
          icon: 'none'
        })
        return
      }
      // 判断是否登录了
      if (!this.getToken) {
        uni.showToast({
          title: `请先登录 ${this.count} 秒之后跳转到登录页面!`,
          icon: 'none',
          duration: 1000
        })

        this.timer = setInterval(() => {
          if (this.count <= 1) {
            // 清除定时器 & 重置总秒数
            clearInterval(this.timer)
            this.count = 3

            // 跳转到我的页面，并且记录来源页面（目前来说就是购物车）
            uni.switchTab({
              url: '/pages/my/index',
              success: () => {
                // 记录来源的地址，然后方便登录成功之后，调回来
                this.setRedirectInfo('../../pages/cart/index.vue')
              }
            })
            return
          }

          this.count--
          uni.showToast({
            title: `请先登录 ${this.count} 秒之后跳转到登录页面!`,
            icon: 'none',
            duration: 1000
          })
        }, 1000)

        return
      }
      // 下订单 & 支付
      this.orderAndPay()
    },
    async orderAndPay () {
      // 下单
      // 参数准备
      const params = {
        order_price: this.getSelectAmount,
        consignee_addr: this.addstr,
        goods: this.getCartList
          .filter(item => item.goods_state)
          .map(({ goods_id, goods_number, goods_price }) => {
            return {
              goods_id,
              goods_number,
              goods_price
            }
          })
      }
      // 创建订单
      const {
        meta: { status },
        message: { order_number }
      } = await uni.$request({
        url: 'my/orders/create',
        method: 'POST',
        data: params
      })

      if (status !== 200) return

      // 支付
      // 总结：小程序端发请求，请求那五个参数，然后调用 wx.reuqestPayment 弹出支付框，然后
      // 根据用户的选择进行成功（调用后台接口更改状态）或是失败的支付处理（提示）
      // 2.1 获取支付参数（你们可以做）
      const res = await uni.$request({
        url: 'my/orders/req_unifiedorder',
        method: 'POST',
        data: {
          order_number
        }
      })

      if (res.meta.status !== 200) return

      // 2.2 调用uni.requestPayment，传入那5个参数（这一步你们就做不了了）
      uni.requestPayment({
        ...res.message.pay,
        success: async result => {
          console.log('---result---', result)

          // 发请求告诉后台，刚刚用户支付成功，你要把它的订单的支付状态在数据库中改成已支付
          const {
            meta: { status: status2 },
            message: message2
          } = await uni.$request({
            url: 'my/orders/chkOrder',
            method: 'POST',
            data: {
              order_number
            }
          })

          // 如果后台更改状态成功，则提示后台返回的支付成功
          if (status2 === 200) {
            uni.showToast({
              title: message2,
              icon: 'success',
              mask: true
            })

            // todo，跳转到支付成功的提示页面
          }
        },
        fail: ({ errMsg }) => {
          if (errMsg === 'requestPayment:fail cancel') {
            uni.showToast({
              title: '您取消了支付!',
              icon: 'error',
              mask: true
            })
          } else {
            uni.showToast({
              title: '支付失败!',
              icon: 'error',
              mask: true
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.my-settle-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  // 将背景色从 cyan 改为 white
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 5px;
  font-size: 14px;

  .radio {
    display: flex;
    align-items: center;
  }

  .amount {
    color: #c00000;
  }

  .btn-settle {
    height: 50px;
    min-width: 100px;
    // background-color: #c00000;
    color: white;
    line-height: 50px;
    text-align: center;
    padding: 0 10px;
  }
}
</style>
